{extend name="../app/index/view/layout/main.html" /}
//网站标题
{block name="title"}<title>联系 - {$meta.appname}</title>{/block}

//css资源
{block name="link"}
<!-- 第三方库css -->
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

<!-- 自定义css -->
<link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
<style>
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
{/block}

//js资源
{block name="script"}
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['form','layer', 'jquery', 'nav'], function(){
        let layer = layui.layer
            ,$ = layui.jquery
            ,form = layui.form
            ,flag = true;

        //监听提交
        form.on('submit(formMessage)', function(data){
            if (!flag) return false;
            flag = false;
            $.ajax({
                url: "{:url('save')}",
                type:'POST',
                data: data.field,
                success : function(d){
                    layer.msg(d.msg, function(){
                        if (d.code === 0){
                          window.location.reload();
                        }
                        console.log(d.msg);
                        flag = true;
                    });
                }

            });


            return false;
        });


    });
</script>
{/block}

//body
{block name="body"}
<!-- body -->
<section class="body top-25">
  <div class="layui-container">
    <div style="height: 600px;" class=" block">
      <div class="block-header flex-def flex-zBetween">
        <h2>
          <i class="layui-icon layui-icon-flag best-icon"></i>
          联系表单
        </h2>
      </div>

      <!-- form -->
      <form class="layui-form">
        <div class="layui-form-item  top-25">
          <label class="layui-form-label">联系人</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="联系人姓名" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item  top-25">
          <label class="layui-form-label">联系邮箱</label>
          <div class="layui-input-block">
            <input type="email" name="email" required  lay-verify="required|email" placeholder="联系邮箱" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item  top-25">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" required  lay-verify="required" placeholder="标题" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item  top-25 layui-form-text">
          <label class="layui-form-label">消息</label>
          <div class="layui-input-block">
            <textarea name="message" required  lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
          </div>
        </div>
        <div class="layui-form-item  top-25">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formMessage">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>

    </div>
  </div>
</section>
{/block}